* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 13px;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
}

a {
  color: #999;
}

//colors   list
//$colors:(a,b,c);
//$colors(a:1,b:2,c:3);

$colors: (
  "primary": #fd521d,
  "white": #fff,
  "green": #27b255,
  "blue": #4ba4fc,
  "purple":#7e2970,
);
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

//text align
@each $var in(left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

//font size
$base-font-size: 1rem;
$font-sizes: (
  xs: 0.7692,
  //10px
    sm: 0.9231,
  //12px
    md: 1,
  //13px
    lg: 1.0769,
  //14px
    xl: 1.2308,
  //16px,
);

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}
//alt+z换算

//flex

.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);
@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch,
);
@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}
.flex-1 {
  flex: 1;
}

.flex-grow-1 {
  flex-grow: 1;
}

//spacing
//0-5:0
//.mt-1 =>margin top pb-2 padding bottom 2级

$spacing-types: (
  m: margin,
  p: padding,
);
$spacing-directions: (
  t: top,
  r: right,
  l: left,
  b: bottom,
);
$spacing-base-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

//m-0 mx-0
@each $typeKey, $type in $spacing-types {
    //.m-1

    @each $sizeKey, $size in $spacing-sizes {
    //.mt-1{margin-top:0.25rem}
    .#{$typeKey}-#{$sizeKey}{
        #{$type}:$size * $spacing-base-size,
    }
    //mx-1 my-1对应的 y表示上下
    @each $sizeKey, $size in $spacing-sizes {
        //.mt-1{margin-top:0.25rem}
        .#{$typeKey}x-#{$sizeKey}{
            #{$type}-left:$size * $spacing-base-size;
            #{$type}-right:$size * $spacing-base-size,
        }
        .#{$typeKey}y-#{$sizeKey}{
            #{$type}-top:$size * $spacing-base-size;
            #{$type}-bottom:$size * $spacing-base-size,
        }
    }
    //.mt-1
      @each $directionKey, $direction in $spacing-directions {        
     .#{$typeKey}#{$directionKey}-#{$sizeKey}{
          #{$type}-#{$direction}: $size * $spacing-base-size;
     }
    }
  }
}

.btn{
  border: none;
  border-radius: 0.1538rem;
  font-size:map-get($font-sizes,'sm')*$base-font-size;
  padding: 0.2rem 0.6rem;
}

//nav
.nav{
  .nac-item{
    padding-bottom: 0.2rem;
    border-bottom: 3px solid transparent;
    &.acitve{
      border-bottom: 3px solid white;
  
  }


  }
}

//width height
.w-100{
  width: 100%;
}
.h-100{
  height: 100%;
}